<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="side-menu" class="side-menu">
        <ul>
            <li class="menu-item">
                <i class="ri-home-line"></i>
                <span class="menu-text">首页</span>
                <div class="popover">首页</div>
            </li>
            <!-- 下面都是上一个的复制，所以看问题，解决问题，要把复杂问题提炼成一个问题，从0-1,1-100 -->
            <li class="menu-item">
                <i class="ri-briefcase-line"></i>
                <span class="menu-text">办公</span>
                <div class="popover">办公</div>
            </li>
            <li class="menu-item">
                <i class="ri-mail-open-line"></i>
                <span class="menu-text">邮件</span>
                <div class="popover">邮件</div>
            </li>
            <li class="menu-item">
                <i class="ri-line-chart-line"></i>
                <span class="menu-text">报表</span>
                <div class="popover">报表</div>
            </li>
            <li class="menu-item">
                <i class="ri-bar-chart-grouped-line"></i>
                <span class="menu-text">统计</span>
                <div class="popover">统计</div>
            </li>
            <li class="menu-item">
                <i class="ri-global-fill"></i>
                <span class="menu-text">云部署</span>
                <div class="popover">云部署</div>
            </li>
        </ul>
        <li id="toggle" class="menu-item toggle">
            <i class="ri-arrow-left-s-line"></i>
        </li>
    </div>
    
</body>
<script src="./script.js"></script>
</html>